<template>
  <div class="layui-carousel" :id="filter">
    <div carousel-item>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import carousel from "./carousel";
import { oneOf } from "../../utils/assist";

export default {
  name: "Carousel",
  props: {
    filter: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: "600px"
    },
    height: {
      type: String,
      default: "280px"
    },
    full: {
      type: Boolean,
      default: false
    },
    anim: {
      type: String,
      default: "default",
      validator(value) {
        return oneOf(value, ["default", "updown", "fade"]);
      }
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 3000
    },
    index: {
      type: Number,
      default: 0
    },
    arrow: {
      type: String,
      default: "hover",
      validator(value) {
        return oneOf(value, ["hover", "always", "none"]);
      }
    },
    indicator: {
      type: String,
      default: "inside",
      validator(value) {
        return oneOf(value, ["inside", "outside", "none"]);
      }
    },
    trigger: {
      type: String,
      default: "click",
      validator(value){
        return oneOf(value,['hover','click']);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const {
        filter,
        width,
        height,
        full,
        anim,
        autoplay,
        interval,
        index,
        arrow,
        indicator,
        trigger
      } = this;
      carousel.render({
        elem: `#${filter}`,
        width,
        height,
        full,
        anim,
        autoplay,
        interval,
        index,
        arrow,
        indicator,
        trigger
      });
    });
  }
};
</script>

<style scoped>

</style>